<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UploadImage from '@/components/uploadImage.vue'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import { transformDuration } from '@/utils'

const $route = useRoute()
const $router = useRouter()

const keyword = ref('')
const defaultCategory = ref('')
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  id: null,
  course_type: null,
  name: '',
  image: '',
  count: null,
  duration: null,
  course_price: null,
  description: '',
  status: 0,
})

const getListData = async (page) => {
  try {
    const res = await api.get('course/feeCourse', {
      params: {
        keyword: keyword.value,
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
}

const jumpTo = async (url) => {
  $router.push(url)
}

const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
    formData.value.course_type = record.course_type
    formData.value.name = record.name
    formData.value.image = record.image
    formData.value.count = record.count * 1
    formData.value.duration = record.duration * 1
    formData.value.course_price = record.course_price * 1
    formData.value.description = record.description
    formData.value.status = record.status
  } else {
    resetFormData()
  }
  formVisible.value = true
}

const resetFormData = async () => {
  formData.value = {
    id: null,
    course_type: null,
    name: '',
    image: '',
    count: null,
    duration: null,
    course_price: null,
    description: '',
    status: 0,
  }
}

const formSubmit = async () => {
  console.log('formData', formData.value)
  var obj = { ...formData.value }
  if (!obj.name) {
    Message.error('课程名称不可为空')
    return false
  }
  if (!obj.description) {
    Message.error('课程简介不可为空')
    return false
  }
  if (!obj.image) {
    Message.error('课程图片不可为空')
    return false
  }
  if (!obj.course_type) {
    Message.error('课程类型不可为空')
    return false
  }
  if (!obj.count) {
    Message.error('课程章节数不可为空')
    return false
  }
  // if (!obj.duration) {
  //   Message.error('课程时长不可为空')
  //   return false
  // }
  if (obj.course_type == 2 && !obj.course_price) {
    Message.error('课程售价不可为空')
    return false
  }
  if (formData.value.id) {
    try {
      const res = await api.post('course/update/' + obj.id, obj)
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  } else {
    try {
      const res = await api.post('course/create', obj)
      Message.success(res.message)
      formVisible.value = false
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get('course/del/' + id)
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const handleUse = async (id) => {
  try {
    const res = await api.get('course/createCourseOrder/' + id)
    // Message.success(res.message)
    var order_no = res.data.order_no
    var order_price = res.data.order_price

    callBackData(order_no)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

getListData(1)
</script>

<template>
  <div class="page">
    <div class="header">
      <a-space>

        <a-input :style="{ width: '240px' }"
                 v-model="keyword"
                 placeholder="按课程名称查询"
                 allow-clear />

        <a-button @click="getListData(1)"
                  type="primary">查询</a-button>

      </a-space>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="课程名称"
                        data-index="name"></a-table-column>
        <a-table-column title="课程分类">
          <template #cell="{ record }">
            <div v-if="record.course_type==1">通用课程</div>
            <div v-if="record.course_type==2">付费课程</div>
            <div v-if="record.course_type==3">定制课程</div>
          </template>
        </a-table-column>
        <a-table-column title="课程封面">
          <template #cell="{ record }">
            <a-image width="100"
                     height="100"
                     fit="cover"
                     :src="record.image" />
          </template>
        </a-table-column>
        <a-table-column title="发布时间"
                        data-index="created_at"></a-table-column>
        <a-table-column title="课程售价"
                        data-index="course_price"></a-table-column>
        <a-table-column title="课程章节数"
                        data-index="count"></a-table-column>
        <a-table-column title="课程总时长">
          <template #cell="{ record }">
            {{ transformDuration(record.duration, true) }}
          </template>
        </a-table-column>
        <!-- <a-table-column title="开售状态" align="center">
          <template #cell="{ record }">
            <a-switch :disabled="true" v-model="record.status" :checked-value="1" :unchecked-value="0" />
          </template>
        </a-table-column> -->
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <!-- <a-popconfirm @ok="deleteItem(record.id)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm> -->
              <a-popconfirm @ok="handleUse(record.id)"
                            content="确认使用该课程吗?"
                            type="info">
                <a-button size="mini"
                          type="outline">立即使用</a-button>
              </a-popconfirm>
              <a-button @click="showFormData(record)"
                        type="primary"
                        size="mini">查看详情</a-button>
              <a-button @click="jumpTo('/course/details?id=' + record.id + '&pageType=2')"
                        type="primary"
                        size="mini">章节信息</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal title="课程详情"
             width="600px"
             :footer="!formData.id"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form>
        <a-form-item label="课程名称">
          <a-input readonly
                   :style="{width:'400px'}"
                   v-model="formData.name"
                   placeholder="请输入课程名称"></a-input>
        </a-form-item>
        <a-form-item label="课程简介">
          <a-textarea readonly
                      :style="{width:'400px'}"
                      v-model="formData.description"
                      placeholder="请输入课程简介"
                      auto-size />
        </a-form-item>
        <a-form-item label="课程图片">
          <!-- <UploadImage v-model="formData.image"></UploadImage> -->
          <a-image width="200"
                   height="200"
                   fit="cover"
                   :src="formData.image" />
        </a-form-item>
        <a-form-item label="课程类型">
          <div v-if="formData.course_type==1">通用课程</div>
          <div v-if="formData.course_type==2">付费课程</div>
          <div v-if="formData.course_type==3">定制课程</div>
        </a-form-item>
        <a-form-item label="课程章节数">
          <a-input readonly
                   v-model="formData.count"
                   :style="{width:'400px'}"
                   placeholder="请输入课程章节数"
                   :min="1" />
        </a-form-item>
        <a-form-item label="课程时长">
          {{ transformDuration(formData.duration, true) }}
        </a-form-item>
        <a-form-item v-if="formData.course_type==2"
                     label="课程售价">
          <a-input readonly
                   v-model="formData.course_price"
                   :style="{width:'400px'}"
                   placeholder="请输入课程章节数">
            <template #append>
              元
            </template>
          </a-input>
        </a-form-item>
        <!-- <a-form-item label="开售状态">
          <a-switch v-model="formData.status" :checked-value="1" :unchecked-value="0" />
        </a-form-item> -->
      </a-form>
    </a-modal>

  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>